<template>
  <el-container>
    <el-header>
      <!-- 按钮 -->
      <div class="left-panel">
        <el-button
          type="primary"
          icon="el-icon-plus"
          v-has="data.indexName + ':add'"
          @click="add"
        ></el-button>
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          v-has="data.indexName + ':del'"
          @click="batch_del"
        ></el-button>
      </div>
      <!-- 查询界面 -->
      <div class="right-panel">
        <div class="right-panel-search">
          <el-input
            v-model="data.searchList.roleName"
            placeholder="角色名称"
            clearable
          ></el-input>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="searchRole"
          ></el-button>
          <el-button
            type="info"
            plain
            icon="el-icon-refresh"
            @click="resetSearch"
          ></el-button>
        </div>
      </div>
    </el-header>
    <el-main class="nopadding">
      <scTable
        ref="table"
        :apiObj="rolesList"
        row-key="id"
        stripe
        :paginationLayout="'prev, pager, next'"
        @selection-change="selectionChange"
      >
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column type="index" label="#" width="50" />
        <el-table-column
          label="角色名称"
          prop="Name"
          width="150"
        ></el-table-column>
        <el-table-column
          label="描述"
          prop="Remark"
          width="150"
        ></el-table-column>
        <el-table-column fixed="right" label="操作" width="140">
          <template #default="scope">
            <el-button
              type="primary"
              text
              size="small"
              v-has="data.indexName + ':edit'"
              @click="table_edit(scope.row)"
            >
              编辑
            </el-button>
            <el-divider direction="vertical"></el-divider>
            <el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row)">
              <template #reference>
                <el-button
                  type="danger"
                  text
                  size="small"
                  v-has="data.indexName + ':del'"
                >
                  删除
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </scTable>
    </el-main>
  </el-container>
  <save-dialog
    v-if="data.dialog.save"
    ref="saveDialogRef"
    @success="handleSaveSuccess"
    @closed="data.dialog.save = false"
  ></save-dialog>
</template>
<script lang="ts" setup>
import scTable from '@/components/scTable/index.vue';
import roleApi from '@/api/role/index';
import { reactive, ref, nextTick, unref } from 'vue';
import { useRoute } from 'vue-router';
import { roleData } from './type';
import { ElMessageBox, ElMessage } from 'element-plus';
//引入模态框
import saveDialog from './components/save.vue';
const rolesList = roleApi.GetRoles;
let table = ref('');
let saveDialogRef: any = ref('');
const route = useRoute();
let data = reactive<roleData>({
  selection: [],
  indexName: route.name as any,
  //查询对象
  searchList: {
    roleName: '',
  },
  dialog: {
    save: false,
    permission: false,
  },
});
const selectionChange = (selection: any) => {
  data.selection = selection;
};
//查询
const searchRole = () => {
  (table as any).value.upData(data.searchList);
};
// 重置搜索
const resetSearch = () => {
  data.searchList = {};
  (table as any).value.upData(data.searchList);
};
const batch_del = async () => {
  ElMessageBox.confirm(
    `确定删除选中的 ${data.selection.length} 项吗？如果删除项中含有子集将会被一并删除`,
    '提示',
    {
      type: 'warning',
    }
  ).then(async () => {
    const ids = data.selection.map((item: any) => item.Id);
    const res = await roleApi.roledel.post({
      ids: ids,
      isActive: 0,
    });
    if (res.code !== 0) {
      Promise.reject(res.message);
    }
    (table as any).value.upData(data.searchList);
    ElMessage.success('操作成功');
  });
};
//删除角色
const table_del = async (row: any) => {
  const res = await roleApi.roledel.post({
    ids: [row.Id],
    isActive: 0,
  });
  if (res.code !== 0) {
    Promise.reject(res.message);
  } else {
    (table as any).value.upData(data.searchList);
    ElMessage.success('操作成功');
  }
};
//切换到底是添加还是修改方法
const handleSaveSuccess = (data: any, mode: any) => {
  if (mode == 'add' || mode == 'edit') {
    (table as any).value.upData(data.searchList);
  }
};
//添加窗口的弹出方法
const add = () => {
  data.dialog.save = true;
  nextTick(() => {
    saveDialogRef.value.open();
  });
};

// 行内的方法
const table_edit = (row: any) => {
  data.dialog.save = true;
  nextTick(() => {
    saveDialogRef.value.open('edit', row.Id);
  });
};
</script>
